<template>
  <div class="wrap">
    <TagState v-model:value="tag" :config="config" line />
    <AutoList :params="{notifyType: tag}" :request="getMessageList" class="list" @list="list = $event">
      <template
        v-for="(d, i) in list"
        :key="i"
      >
        <div :class="{no_read: !d.isReaded}" class="time">{{ d?.sendTime || d?.createdTime }}</div>
        <div class="card" @tap.stop="goInfo(d)">
          <div :class="{no_read: !d.isReaded}" class="title">{{ d.title }}</div>
          <template v-if="d.content">
            <div class="content">{{ d.content }}</div>
            <div class="more">
              <div class="_label">进度: </div>
              {{ d.process }}
            </div>
            <div class="more">
              <div class="_label">操作人: </div>
              {{ d.handler }}
            </div>
          </template>
        </div>
      </template>
    </AutoList>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import TagState from '@C/TagState.vue'
import AutoList from '@C/AutoList.vue'
import { Router } from '@U/common'
import { weixinSubscription } from '@U/Auth'
import { onShow } from '@dcloudio/uni-app'
import type { IObj, IObjArray } from '@/interface'
import { getMessageList, getNotifyCount } from './request'

onShow(async () => {
  weixinSubscription()
  const { data } = await getNotifyCount().finally(() => {})
  config.forEach((c: IObj, i: number) => {
    config[i].dot = false
  })
  config[0].dot = !!data.filter((i: IObj) => i.hasMsg).length
  const dotList = data.filter((i: IObj) => i.hasMsg).map((i: IObj) => i.type)
  dotList.forEach((i: number) => {
    config[i].dot = true
  })
})

// 消息配置
const config = reactive(<IObjArray>[
  { label: '全部', key: '', dot: false },
  { label: '服务通知', key: '1', dot: false },
  { label: '活动通知', key: '2', dot: false },
  { label: '产品通知', key: '3', dot: false },
  { label: '政策通知', key: '4', dot: false },
  { label: '平台通知', key: '5', dot: false },
])
const tag = ref('')

// 消息列表
const list = ref(<IObjArray>[])

// 查看详情
const goInfo = (params = {}) => {
  weixinSubscription()
  if (tag.value === '6' || tag.value === '0') return
  Router.push('informDetail', params)
}
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  .list {
    flex: 1 1;
    padding: 0 40rpx;
  }
}
.time {
  color: #c1c1c1;
  text-align: center;
  margin: 40rpx 0 16rpx 0;
}
.card {
  background: white;
  border-radius: 24rpx;
  padding: 30rpx;
  color: #c1c1c1;
  margin-bottom: 28rpx;
  .content, .more {
    font-size: 24rpx;
  }
  .content {
    padding: 18rpx 0 30rpx 0;
  }
  .more {
    ._label {
      width: 100rpx;
      display: inline-block;
    }
  }
}
.no_read {
  color: black;
}
</style>
